<template>
    <div>
        <Form :label-width="80" inline>
            <FormItem label="专业">
                <Input @on-clear="getAllParofessional" v-model="param.name" clearable class="myform"/>
            </FormItem>
            <FormItem label="专业代码">
                <Input @on-clear="getAllParofessional" v-model="param.schoolMajorCode" clearable class="myform"/>
            </FormItem>
            <FormItem label="学院">
                <Select @on-clear="getAllParofessional" v-model="param.collegeId" clearable class="myform">
                    <Option v-for="item in modal.list" :key="item.collegeId" :value="item.collegeId">
                        {{item.name}}
                    </Option>
                </Select>
                <Button icon="ios-search" type="success" @click="getAllParofessional" class="btn">查询</Button>
            </FormItem>
        </Form>
        <Row>
            <Col span="2">
                <Button class="mybtn1" icon="md-add-circle" @click="modal.addParofessionalFlag = true" type="info">添加</Button>
            </Col>
            <Col span="2">
                <Button style="margin-left: -40px" class="mybtn1" icon="md-cloud-upload" @click="" type="info">导出表格</Button>
            </Col>
            <Col span="2">
                <!--<Button class="mybtn1" icon="md-cloud-download" @click="" type="primary">模板下载</Button>-->
                <download-excel
                        class = "export-excel-wrapper"
                        :data = "json_data"
                        :fields = "json_fields"
                        name = "学院信息表.xls">
                    <Button style="margin-left: -50px" class="mybtn1" icon="md-cloud-download" type="primary">模板下载</Button>
                </download-excel>
            </Col>
            <Col span="2">
                <Button style="margin-left: -60px" class="mybtn1" icon="md-cloud-download" @click="modalUpload.modalUploadFlag = true" type="primary">导入数据</Button>
            </Col>
        </Row>
        <Table border :columns="columns" :data="data">
            <template slot-scope="{ row, index }" slot="action">
                <div v-if="!row.editFlag">
                    <Button icon="ios-build" type="primary" size="small" style="margin-right: 5px" @click="row.editFlag = true">编辑</Button>
                    <Poptip
                            confirm
                            transfer
                            title="是否删除?"
                            @on-ok="remove(row,index)"
                            @on-cancel="$Message.info('已取消')">
                        <Button icon="md-trash" type="error" size="small">删除</Button>
                    </Poptip>
                </div>
                <div v-else>
                    <Button type="success" icon="ios-paper" size="small" style="margin-right: 5px"
                            @click="row.editFlag = false,saveUpdateParofessional(row)">保存
                    </Button>
                    <Button type="info" icon="ios-hand" size="small" @click="cancelSave(row)">取消</Button>
                </div>
            </template>
        </Table>
        <Page :total="total" :page-size="param.size" @on-change="changePage" @on-page-size-change="changePageSize"
              show-sizer show-total show-elevator transfer/>
        <add-professional :modal="modal"/>
        <uploda-modal :modal="modalUpload" @changeStatus="getAllParofessional"/>
    </div>
</template>

<script>
    import addProfessional from "../../components/modal/basicData/addParofessional";
    import uplodaModal from "../../components/modal/basicData/uplodaModal";

    export default {
        components:{
            addProfessional,
            uplodaModal
        },
        data() {
            return {
                modal:{
                    addParofessionalFlag:false,
                    list:[]
                },
                modalUpload:{
                    modalUploadFlag:false,
                    url:"/parofessional/uplodaExcl"
                },
                total:0,
                param:{
                    page:1,
                    size:1,
                    name:"",
                    schoolMajorCode:"",
                    collegeId:""
                },
                columns: [
                    {
                        type: 'index',
                        width: 70,
                        title: '序号',
                        align: 'center'
                    },
                    {
                        title: '专业名称',
                        sortable:true,
                        render: (h, params) => {
                            if (params.row.editFlag) {
                                return <i-input value={params.row.name} oninput={(e) => {
                                    params.row.name = e
                                }}/>
                            } else {
                                return <span>{params.row.name}</span>
                            }
                        }
                    },
                    {
                        title: '专业代码',
                        sortable:true,
                        render: (h, params) => {
                            if (params.row.editFlag) {
                                return <i-input value={params.row.schoolMajorCode} oninput={(e) => {
                                    params.row.schoolMajorCode = e
                                }}/>
                            } else {
                                return <span>{params.row.schoolMajorCode}</span>
                            }
                        }
                    },
                    {
                        title: '学科类别码',
                        sortable:true,
                        render: (h, params) => {
                            if (params.row.editFlag) {
                                return <i-input value={params.row.typeCode} oninput={(e) => {
                                    params.row.typeCode = e
                                }}/>
                            } else {
                                return <span>{params.row.typeCode}</span>
                            }
                        }
                    },
                    {
                        title: '专业代码（国标）',
                        sortable:true,
                        render: (h, params) => {
                            if (params.row.editFlag) {
                                return <i-input value={params.row.majorCode} oninput={(e) => {
                                    params.row.majorCode = e
                                }}/>
                            } else {
                                return <span>{params.row.majorCode}</span>
                            }
                        }
                    },
                    {
                        title: '学院',
                        sortable:true,
                        render: (h, params) => {
                            if (params.row.editFlag) {
                                return <i-select transfer v-model={params.row.collegeId} >
                                    {
                                        this.modal.list.map(m=>{
                                            return <Option value={m.collegeId}>{m.name}</Option>
                                        })
                                    }
                                </i-select>
                            } else {
                                return this.modal.list !=null? <span>{this.modal.list.filter(f=> f.collegeId==(params.row.collegeId).toString())[0].name}</span>:
                                    <span>{params.row.collegeName}</span>
                            }
                        }
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 200,
                        align: 'center'
                    }
                ],
                data: [],
                assignData:[] //克隆用
            }
        },
        methods: {
            /**
             * 点击下一页
             * @param val
             */
            changePage(val) {
                this.param.page = val
                this.getAllParofessional()
            },
            /**
             * 切换分页的每页显示条数
             * @param val
             */
            changePageSize(val) {
                this.param.size = val
                if (this.param.page === 1) {
                    this.getAllParofessional()
                }
            },
            /**
             * 删除
             *
             */
            remove(row,index) {
                this.http.delete(`/parofessional/deleteParofessionalById/${row.majorId}`).then(res =>{
                    if(res){
                        this.$Message.success('删除成功！')
                        this.data.splice(index, 1);
                    }
                })

            },
            /**
             * 对象克隆
             */
            cancelSave(row) {
                row.editFlag = false
                this.data = []
                Object.assign(this.data, this.assignData)
            },
            /**
             * 获取所有学院信息
             */
            async getAllCollege(){
                await this.http.get('/college/getAllCollegewithNopamrm').then(res=>{
                    this.modal.list = res.data;
                })
            },

             /**
             * 获取全部
             */
           async getAllParofessional(){
               await  this.getAllCollege();
               await  this.http.post("/parofessional/getAllParofessional",this.qs.parse(this.param)).then(res=>{
                        if (res.data) {
                            this.data = res.data.list.map(m => {
                                m.editFlag = false
                                return m
                            })
                            this.total = res.data.total
                            Object.assign(this.assignData, this.data)
                        }
                    }).finally(f => {
                        this.loading = false
                    })
            },
            /**
             * 保存更新
             */
            saveUpdateParofessional(row){
                let collegeDo = row;
                this.http.put("/parofessional/saveEditParofessional", this.qs.parse(collegeDo)).then(res => {
                    if (res) {
                        this.$Message.success("修改成功")
                    }
                })
            },
        },
        created() {
            this.getAllParofessional()

        }

    }
</script>

<style scoped>
    .myform {
        width: 300px;
    }

    .btn {
        margin-left: 10px;
    }
</style>
